// 设置页面的JavaScript代码

document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const ocrEngineRadios = document.querySelectorAll('input[name="ocr-engine"]');
    const tesseractSettingsContainer = document.getElementById('tesseract-settings-container');
    const tesseractSettingsHeader = document.getElementById('tesseract-settings-header');
    const tesseractSettingsContent = document.getElementById('tesseract-settings-content');
    const toggleIcon = document.getElementById('toggle-icon');
    const saveSettingsBtn = document.getElementById('save-settings');
    const saveTesseractBtn = document.getElementById('save-tesseract');
    const backBtn = document.getElementById('back-btn');
    const tesseractCmdInput = document.getElementById('tesseract-cmd');
    const statusMessage = document.getElementById('statusMessage');
    
    // 检查所有必需的DOM元素是否存在
    if (!ocrEngineRadios || !tesseractSettingsContainer || !tesseractSettingsHeader || !tesseractSettingsContent || 
        !toggleIcon || !saveSettingsBtn || !saveTesseractBtn || !backBtn || 
        !tesseractCmdInput || !statusMessage) {
        console.error('某些必需的DOM元素未找到');
        return;
    }
    
    // 添加Tesseract配置区域展开/收起功能
    tesseractSettingsHeader.addEventListener('click', toggleTesseractSettingsVisibility);
    
    // 监听OCR引擎选择变化
    ocrEngineRadios.forEach(radio => {
        radio.addEventListener('change', toggleTesseractSettings);
    });
    
    // 保存设置按钮事件
    saveSettingsBtn.addEventListener('click', saveSettings);
    
    // 保存Tesseract配置按钮事件
    saveTesseractBtn.addEventListener('click', saveTesseractConfig);
    
    // 返回按钮事件
    backBtn.addEventListener('click', () => {
        window.location.href = 'index.html';
    });
    
    // 切换Tesseract配置区域可见性
    function toggleTesseractSettingsVisibility() {
        const isHidden = tesseractSettingsContent.classList.contains('hidden');
        
        if (isHidden) {
            // 展开
            tesseractSettingsContent.classList.remove('hidden');
            toggleIcon.classList.remove('fa-chevron-down');
            toggleIcon.classList.add('fa-chevron-up');
            toggleIcon.style.transform = 'rotate(180deg)';
        } else {
            // 收起
            tesseractSettingsContent.classList.add('hidden');
            toggleIcon.classList.remove('fa-chevron-up');
            toggleIcon.classList.add('fa-chevron-down');
            toggleIcon.style.transform = 'rotate(0deg)';
        }
    }
    
    // 切换Tesseract设置显示
    function toggleTesseractSettings() {
        const selectedEngine = document.querySelector('input[name="ocr-engine"]:checked');
        console.log('切换Tesseract设置显示，选中的引擎:', selectedEngine ? selectedEngine.value : '无');
        if (!selectedEngine) return;
        
        if (selectedEngine.value === 'tesseract') {
            console.log('显示Tesseract设置容器');
            tesseractSettingsContainer.classList.remove('hidden');
            tesseractSettingsContainer.style.display = 'block';
        } else {
            console.log('隐藏Tesseract设置容器');
            tesseractSettingsContainer.classList.add('hidden');
            tesseractSettingsContainer.style.display = 'none';
        }
    }
    
    // 加载设置
    function loadSettings() {
        // 从服务器加载配置
        fetch('/api/config')
            .then(response => {
                console.log('加载配置响应状态:', response.status);
                console.log('加载配置响应头:', [...response.headers.entries()]);
                
                if (!response.ok) {
                    return response.text().then(text => {
                        console.error('加载配置响应文本:', text);
                        throw new Error(`网络响应错误: ${response.status} ${response.statusText}`);
                    });
                }
                return response.json();
            })
            .then(config => {
                console.log('从服务器加载配置:', config);
                
                // 加载OCR引擎选择
                const engineRadio = document.querySelector(`input[value="${config.ocrEngine}"]`);
                console.log('找到的引擎单选按钮:', engineRadio);
                if (engineRadio) {
                    engineRadio.checked = true;
                    console.log('设置选中的引擎:', config.ocrEngine);
                } else {
                    // 如果没有找到匹配的引擎，确保默认选中OpenCV
                    const defaultEngineRadio = document.querySelector('input[value="opencv"]');
                    if (defaultEngineRadio) {
                        defaultEngineRadio.checked = true;
                    }
                }
                
                // 加载Tesseract配置（如果存在）
                if (config.tesseract && config.tesseract.cmd) {
                    tesseractCmdInput.value = config.tesseract.cmd;
                }
                
                // 根据选择显示/隐藏Tesseract设置
                console.log('调用toggleTesseractSettings');
                // 使用setTimeout确保在DOM完全更新后再调用
                setTimeout(toggleTesseractSettings, 100);
            })
            .catch(error => {
                console.error('加载服务器配置失败:', error);
                
                // 如果服务器加载失败，使用默认配置
                const engineRadio = document.querySelector('input[value="opencv"]');
                console.log('使用默认配置，找到的OpenCV单选按钮:', engineRadio);
                if (engineRadio) {
                    engineRadio.checked = true;
                    console.log('设置默认选中的引擎: opencv');
                }
                
                // 根据选择显示/隐藏Tesseract设置
                console.log('调用toggleTesseractSettings');
                // 使用setTimeout确保在DOM完全更新后再调用
                setTimeout(toggleTesseractSettings, 100);
            });
    }
    
    // 保存设置
    function saveSettings() {
        const selectedEngineElement = document.querySelector('input[name="ocr-engine"]:checked');
        // 如果没有选中的引擎，则默认选择opencv
        const selectedEngine = selectedEngineElement ? selectedEngineElement.value : 'opencv';
        
        const config = {
            ocrEngine: selectedEngine,
            tesseract: {
                cmd: tesseractCmdInput.value
            }
        };
        
        console.log('准备发送的配置:', config);
        
        // 通过Python后端保存配置
        fetch('/api/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        })
        .then(response => {
            console.log('保存设置响应状态:', response.status);
            console.log('保存设置响应头:', [...response.headers.entries()]);
            
            // 即使是错误状态码，也要尝试读取响应体
            return response.text().then(text => {
                console.log('保存设置响应文本:', text);
                // 检查响应是否是JSON格式
                if (text.trim().startsWith('{') || text.trim().startsWith('[')) {
                    try {
                        return { data: JSON.parse(text), ok: response.ok, status: response.status };
                    } catch (e) {
                        // JSON解析失败
                        return { data: text, ok: response.ok, status: response.status };
                    }
                } else {
                    // 不是JSON格式，可能是错误信息
                    return { data: text, ok: response.ok, status: response.status };
                }
            });
        })
        .then(result => {
            console.log('保存配置结果:', result);
            if (result.ok) {
                if (typeof result.data === 'object' && result.data.success) {
                    showStatusMessage('设置已保存！', 'success');
                    // 保存后立即更新显示状态
                    setTimeout(toggleTesseractSettings, 100);
                } else {
                    showStatusMessage('保存设置失败: ' + (result.data.error || result.data || '未知错误'), 'error');
                }
            } else {
                // 处理非2xx状态码
                let errorMessage = '网络响应错误: ' + result.status;
                if (typeof result.data === 'object' && result.data.error) {
                    errorMessage += ' - ' + result.data.error;
                } else if (typeof result.data === 'string') {
                    errorMessage += ' - ' + result.data;
                }
                showStatusMessage(errorMessage, 'error');
            }
        })
        .catch(error => {
            console.error('保存设置错误:', error);
            showStatusMessage('保存设置失败: ' + error.message, 'error');
        });
    }
    
    // 保存Tesseract配置
    function saveTesseractConfig() {
        const tesseractCmd = tesseractCmdInput.value.trim();
        
        if (tesseractCmd) {
            const selectedEngineElement = document.querySelector('input[name="ocr-engine"]:checked');
            // 如果没有选中的引擎，则默认选择opencv
            const selectedEngine = selectedEngineElement ? selectedEngineElement.value : 'opencv';
            
            const config = {
                ocrEngine: selectedEngine,
                tesseract: {
                    cmd: tesseractCmd
                }
            };
            
            console.log('准备发送的Tesseract配置:', config);
            
            // 通过Python后端保存配置
            fetch('/api/config', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(config)
            })
            .then(response => {
                console.log('保存Tesseract配置响应状态:', response.status);
                console.log('保存Tesseract配置响应头:', [...response.headers.entries()]);
                
                // 即使是错误状态码，也要尝试读取响应体
                return response.text().then(text => {
                    console.log('保存Tesseract配置响应文本:', text);
                    // 检查响应是否是JSON格式
                    if (text.trim().startsWith('{') || text.trim().startsWith('[')) {
                        try {
                            return { data: JSON.parse(text), ok: response.ok, status: response.status };
                        } catch (e) {
                            // JSON解析失败
                            return { data: text, ok: response.ok, status: response.status };
                        }
                    } else {
                        // 不是JSON格式，可能是错误信息
                        return { data: text, ok: response.ok, status: response.status };
                    }
                });
            })
            .then(result => {
                console.log('保存Tesseract配置结果:', result);
                if (result.ok) {
                    if (typeof result.data === 'object' && result.data.success) {
                        showStatusMessage('Tesseract配置已保存！', 'success');
                        // 保存后立即更新显示状态
                        setTimeout(toggleTesseractSettings, 100);
                    } else {
                        showStatusMessage('保存Tesseract配置失败: ' + (result.data.error || result.data || '未知错误'), 'error');
                    }
                } else {
                    // 处理非2xx状态码
                    let errorMessage = '网络响应错误: ' + result.status;
                    if (typeof result.data === 'object' && result.data.error) {
                        errorMessage += ' - ' + result.data.error;
                    } else if (typeof result.data === 'string') {
                        errorMessage += ' - ' + result.data;
                    }
                    showStatusMessage(errorMessage, 'error');
                }
            })
            .catch(error => {
                console.error('保存Tesseract配置错误:', error);
                showStatusMessage('保存Tesseract配置失败: ' + error.message, 'error');
            });
        } else {
            showStatusMessage('请填写Tesseract命令路径', 'error');
        }
    }
    
    // 显示状态消息
    function showStatusMessage(message, type) {
        if (!statusMessage) return;
        
        // 清除之前的类
        statusMessage.className = 'status-message mb-4 p-4 rounded-lg text-left';
        
        // 根据消息类型设置样式和图标
        switch (type) {
            case 'success':
                statusMessage.innerHTML = `<i class="fas fa-check-circle mr-2"></i>${message}`;
                statusMessage.classList.add('bg-green-100', 'text-green-700');
                break;
            case 'error':
                statusMessage.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i>${message}`;
                statusMessage.classList.add('bg-red-100', 'text-red-700');
                break;
            default:
                statusMessage.innerHTML = message;
                statusMessage.classList.add('bg-gray-100', 'text-gray-700');
        }
        
        // 显示消息
        statusMessage.classList.remove('hidden');
        
        // 3秒后自动隐藏消息
        setTimeout(() => {
            if (statusMessage && !statusMessage.classList.contains('hidden')) {
                statusMessage.classList.add('hidden');
            }
        }, 3000);
    }
    
    // 页面加载完成后加载设置
    loadSettings();
});